<!-- 学社 - 学社主页 - 私董会组件 -->
<template>
  <view class="relative">
    <!-- 社长vip以上可查看 -->
    <view v-if="createrInfo?.vip_level < 2"
      class="auth-mask flex justify-center absolute top-0 left-0 z-999 w-full h-full"
      @click="navigate('/package_user/pages/vip/add?tabCurrent=1')">
      <view class="mt-30 flex justify-center items-center w-526 h-68 bg-#F4AF22 rounded-md c-white text-28">
        升级高级会员，享有更高权限
      </view>
    </view>
    <view class="px-4 pt-3">
      <view v-if="state.list.length == 0" class="flex flex-col items-center justify-center">
        <image class="w-228 h-228 mt-8" src="/static/images/empty/img_empty.png" />
        <view class="text-28 c-#666 mt-2">暂无数据</view>
      </view>
      <template v-else>
        <u-time-line>
          <u-time-line-item v-for="(item, index) in state.list" :key="index" node-top="10" class="flex">
            <!-- 此处自定义了左边内容，用一个图标替代 -->
            <template v-slot:node>
              <!-- 此处为uView的icon组件 -->
              <image v-if="item.is_finish" class="w-24 h-24" src="/static/images/home/ic_checked.png"></image>
              <view v-else class="node-border w-24 h-24 rounded-full" />
            </template>
            <template v-slot:content>
              <view class="flex-1">
                <view class="flex justify-between">
                  <view class="relative p-1 text-single font-bold">
                    {{ item.name }}
                    <u-badge v-if="item.is_read" :is-dot="true" :offset="[4, 0]" type="error"></u-badge>
                  </view>
                  <view class="flex-shrink-0 flex items-center" @click="onItemClick(item)">
                    <view class="c-#F4AF22 text-28 mr-2">服务记录({{ Number(item.service_num) }})</view>
                    <image class="w-14 h-24" src="/static/images/home/ic_more_yellow.png"></image>
                  </view>
                </view>
                <view class="c-#999 text-24 mt-2 mb-3">（{{ item.desc }}）</view>
              </view>
            </template>
          </u-time-line-item>
        </u-time-line>
      </template>
    </view>

    <u-modal v-model="state.show" :show-title="false" border-radius="12" :show-confirm-button="false">
      <view class="slot-content">
        <view class="flex justify-center c-#333 text-32 font-bold">温馨提示</view>
        <view class="text-center c-#333 text-sm my-10">
          该私董会服务已经有顾问在进行服务了，请选择其他服务发起~
        </view>
        <view class="flex items-center justify-center">
          <view class="btn-save mx-3" @click="state.show = false">知道了</view>
        </view>
      </view>
    </u-modal>

  </view>
</template>
<script setup>
import { navigate } from '@/common/util/uni';
import { getDirectorsLists } from '@/common/http/module/society.js'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

const userInfo = computed(() => userStore.userInfo)

const emit = defineEmits(['refresh'])
const props = defineProps({
  data: Array,
  club_id: [String, Number],
  member_position: [String, Number],  // 用户在该学社身份
  createrInfo: Object // 社长信息
})

const state = reactive({
  list: [],
  vipLevel: 2,
  show: false
})

function onItemClick (item) {
  emit('refresh')
  if (userInfo.value.id == item.counselor_id || item.counselor_id == 0 || props.member_position == 2 || props.member_position == 3) {
    navigate(`/package_society/pages/service/record?service_id=${item.id}&club_id=${props.club_id}&service_num=${item.service_num}&member_position=${props.member_position}&number=${item.number}`)
  } else {
    state.show = true
  }
}


// 获取私董会列表
async function loadData () {
  const initData = [
    {
      "id": 1,
      "name": "上门诊断",
      "desc": "这是一段描述",
      "number": 5,
      "service_num": 0,
      "is_finish": false,
      "is_read": false,
      "counselor_id": 0
    },
    {
      "id": 2,
      "name": "团建规划",
      "desc": "这是一段描述\r\n",
      "number": 5,
      "service_num": 0,
      "is_finish": false,
      "is_read": false,
      "counselor_id": 0
    },
    {
      "id": 7,
      "name": "制度与流程",
      "desc": "这是一段描述",
      "number": 5,
      "service_num": 0,
      "is_finish": false,
      "is_read": false,
      "counselor_id": 0
    },
    {
      "id": 9,
      "name": "制度梳理",
      "desc": "这是一段描述",
      "number": 5,
      "service_num": 0,
      "is_finish": false,
      "is_read": false,
      "counselor_id": 0
    },
    {
      "id": 10,
      "name": "内训体系搭建",
      "desc": "这是一段描述",
      "number": 5,
      "service_num": 0,
      "is_finish": false,
      "is_read": false,
      "counselor_id": 0
    }
  ]

  const { data } = await getDirectorsLists(props.club_id)
  state.list = props.createrInfo.vip_level < 2 ? initData : data
  console.log('私董会列表', data);
}

onMounted(() => {
  loadData()
})
defineExpose({
  loadData
})
</script>

<style lang="scss" scoped>
.auth-mask {
  background-color: rgba(255, 255, 255, .8);
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.1);
}

.node-border {
  border: 2rpx solid #F4AF22;
}

.slot-content {
  position: relative;
  padding: 40rpx;
}

.btn-save {
  width: 100%;
  height: 68rpx;
  line-height: 68rpx;
  text-align: center;
  color: #fff;
  font-size: 28rpx;
  border-radius: 10rpx;
  background-color: #F4AF22;
}
</style>
